<template>
  <div>
    <div>
      <h3>主机密码</h3>
      <p style="color: #999">修改访问设备的管理员密码</p>
    </div>
    <el-card>
      <center>
        <div class="wrap">
          <span style="color: #404040">密码</span>
          <el-input
            class="input"
            v-model="pwd"
            :show-password="!show"
          ></el-input>
        </div>
        <div class="wrap wrapper">
          <span style="color: #404040">确认密码</span>
          <el-input
            class="input"
            v-model="againPwd"
            :show-password="!show2"
          ></el-input>
        </div>
      </center>
    </el-card>
    <div>
      <h3>SSH 访问</h3>
      <p style="color: #999">Dropbear 提供 SSH 访问和 SCP 服务</p>
    </div>
    <el-card>
      <p style="font-weight: 700">Dropbear实例</p>
      <el-button class="del">删除</el-button>
      <div class="interfaceBox">
        <span style="margin-right: 10px">接口</span>
        <span class="radioBtn">
          <el-radio v-model="radio" label="1">
            <div class="interface">
              lan:
              <img src="../../assets/images/ethernet.png" alt="" srcset="" />
            </div>
          </el-radio>
          <el-radio v-model="radio" label="2"
            ><div class="interface">
              vpn0:
              <img
                src="../../assets/images/ethernet.png"
                alt=""
                srcset=""
              /></div
          ></el-radio>
          <el-radio v-model="radio" label="3">未指定</el-radio>
          <br />

          <div class="interfaceTips">
            <i class="el-icon-question"></i>仅监听指定的接口，未指定则监听全部
          </div>

          <div>
            <span>端口</span><el-input class="input"></el-input>
            <p class="interfaceTips port">
              <i class="el-icon-question"></i> 指定此 Dropbear 实例的监听端口
            </p>
          </div>

          <div class="pwd">
            <span>密码验证</span>
            <el-checkbox v-model="checked" class="interfaceTips">
              <i class="el-icon-question"></i>允许 SSH 密码验证</el-checkbox
            >
          </div>

          <div class="login">
            <span>允许 root 用户凭密码登录</span>
            <el-checkbox v-model="checked" class="interfaceTips">
              <i class="el-icon-question"></i>允许 root
              用户凭密码登录</el-checkbox
            >
          </div>

          <div class="networkPort">
            <span>网关端口</span>
            <el-checkbox v-model="checked" class="interfaceTips">
              <i class="el-icon-question"></i>允许远程主机连接到本地 SSH
              转发端口</el-checkbox
            >
          </div>
        </span>
      </div>

      <el-button class="add">添加</el-button>
    </el-card>

    <el-card>
      <p style="font-weight: 700">SSH 密钥</p>
      <p style="color: #999">
        请在此处粘贴 SSH 公钥，每行一个，用于 SSH 公钥认证。
      </p>
      <el-input type="textarea" :rows="5" v-model="textarea"> </el-input>
    </el-card>

    <div class="button">
      <el-button class="saveOrUpdate">保存&应用</el-button>
      <el-button class="save">保存</el-button>
      <el-button class="init">复位</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pwd: "",
      againPwd: "",
      show: false,
      show2: false,
      radio: "1",
      textarea: "",
    };
  },
  methods: {},
};
</script>

<style scoped>
.input {
  display: inline-block;
  width: 400px;
  margin-left: 10px;
  margin-top: 10px;
}
.wrapper {
  margin-left: -27px;
}
.wrap img {
  margin-left: 5px;
}
.interface {
  display: inline-block;
  background-color: #eee;
  border-radius: 4px;
  padding: 2px;
  width: 55px;
  height: 20px;
  border: 1px solid #ccc;
}
/* .radioBtn {
  display: flex;
  flex-direction: column;
} */
.el-radio {
  padding-top: 10px;
}
.interfaceTips {
  margin-top: 10px;
  color: #999;
  margin-left: 10px;
}
.interfaceBox {
  padding-left: 400px;
}
.port {
  margin-left: 40px;
  margin-top: 5px;
}
.pwd,
.networkPort {
  margin-left: -30px;
}
.login {
  margin-left: -150px;
}
.add {
  background: #825ee4;
  color: #fff;
}
.del {
  float: right;
  background: #fb6340 !important;
  color: #fff;
}
.button {
  float: right;
  margin-top: 15px;
}
.saveOrUpdate {
  background: #4d418b;
  color: #fff;
}
.save {
  background: #825ee4;
  color: #fff;
}
.init {
  background: #2dce89;
  color: #fff;
}
</style>